<!DOCTYPE html>
<html>
	<head>
		<title>使用createObjectURL方法将图片转为Blob URL</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<h2>使用createObjectURL方法将图片转为Blob URL</h2>
		<p>此方法适合图片较大情况</p>
		<p>base64可以作为任意域或浏览器路径中使用，与普通url无异。</p>
		<p>但Blob URL 只能在当前域使用，可以理解为内存地址。</p>
		<form name="form0" id="form0">
			<input type="file" name="file0" id="file0" onchange="fileChange(this)" multiple="multiple" />
			<br>
			<img src="" width="100" height="100" id="img0">
		</form>
		<script>
			window.fileChange = function(dom){
				var file = dom.files[0];
				var objUrl = getObjectURL(file);
				console.log("objUrl = " + objUrl);
				if (objUrl) {
					document.querySelector("#img0").setAttribute("src", objUrl);
				}
			}

			//取得该文件的url 
			function getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) {
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) {
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) {
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		</script>
	</body>
</html>
